<template>
  <div class="register">
        <div class="header">
              <div class="logo">
                    <img :src="thum"/>
              </div>
              <p>大手小牵帮你找老师</p>
        </div>
        <ul class="info1">
             <li>
                 <label>学生姓名</label>
                 <input type="text" v-model="studentName" placeholder="学生姓名"/>
             </li>
             <li>
                 <label>邀请码</label>
                 <input type="text" v-model="couponCode" placeholder="可获取优惠券"/>
             </li>
             <li>
                 <label>邮箱</label>
                 <input type="email" v-model="email" placeholder="请输入邮箱"/>
             </li>
             <li>
                 <label>联系手机</label>
                 <input type="text" v-model="mobile" placeholder="您的手机号码"/>
             </li>
             <li>
                 <label>验证码</label>
                 <input type="text" v-model="authCode" placeholder="验证码" maxlength="6" onkeyup="value=value.replace(/[^\d]/g,'')"/>
                 <button class="getCode" @click="clock();">{{getCodeHint}}</button>
             </li>
        </ul>
        <ul class="info2">
             <li @click="grade_tab_show=true">
                 <label>学生年级</label>
                 <input type="text" v-model="grade" placeholder="学生年级" readonly />
             </li>
             <li @click="show_course_tab();">
                 <label>课程选择</label>
                 <input type="text" v-model="selectedCourse" placeholder="课程选择" readonly />
             </li>
        </ul>
        <div class="message">
             <textarea v-model="remark" placeholder="请填写您孩子的情况，对老师的要求等..."></textarea>
             <p>{{remark.length}}/120</p>
        </div>
        <p class="commit" @click="commit();">帮我找老师</p>
        <!--年级选项卡-->
        <div class="grade_prop" v-show="grade_tab_show" @click="closeProp('grade_tab_show');">
              <ul>
                   <li v-for="gradeSingle in gradeList" :class="{'active':gradeSingle==grade}">
                        <label>{{gradeSingle}}</label>
                        <input type="radio" :value="gradeSingle" v-model="grade"/>
                   </li>
              </ul>
        </div>
        <!--年级选项卡-->
        <div class="course_prop" v-show="course_tab_show" @click="course_tab_show=false;">
              <div>
                    <p>课程选择，最多选三项</p>
                    <ul>
                         <li v-for="course in courseList" :class="{'active':selectedCourseArr.indexOf(course)>-1}" @click.stop="toggle(course);">
                              <label>{{course}}</label>
                         </li>
                    </ul>
                    <button @click="course_tab_show=false;">确定</button>
              </div>
        </div>
        <public-footer></public-footer>
  </div>
</template>

<script>
import publicFooter from './footer'
export default {
    data(){
        return{
           id:'',
           thum:'',
           studentName:'',
           couponCode:'',
           email:'',
           mobile:'',
           authCode:'',
           grade:'',
           selectedCourseArr:[],
           remark:'',
           getCodeHint:'获取验证码',
           grade_tab_show:false,
           course_tab_show:false,
           gradeList:['一年级','二年级','三年级','四年级','五年级','六年级','七年级','八年级','九年级','高一','高二','高三'],
           courseList:[],
           courseList1:['语文','数学','英语'],
           courseList2:['语文','数学','英语','物理','化学','政治','历史'],
           courseList3:['语文','数学','英语','物理','化学','政治','历史','地理','生物']
        }
    },
    components:{
      publicFooter
    },
    mounted:function(){
      this.id=sessionStorage.user_openid;
      this.thum=sessionStorage.user_headimgurl;
      this.getInitialData();
    },
    methods:{
        getInitialData(){
          let _this=this;
          _this.$http.get("/api/studentController.do?id="+_this.id+"&getStudentBaseInfo=null").then((data)=>{
             console.log(data);
             _this.studentName=data.body.body.studentName;
             _this.email=data.body.body.email;
             _this.mobile=data.body.body.mobile;
             _this.couponCode=data.body.body.couponCode;
             _this.grade=data.body.body.grade;
             _this.selectedCourseArr=data.body.body.studySubject.split('|');
             _this.remark=data.body.body.remark;
          })
      },
      closeProp:function(el){
         let _this=this;
         setTimeout(function(){
             _this.grade_tab_show=false;
         },100)
      },
      show_course_tab:function(){
         if(this.grade){
            this.course_tab_show=true;
         }else{
            alert('请先选择年级');
         }
      },
      toggle:function(course){
        let index=this.selectedCourseArr.indexOf(course);
        if(index==-1){
          if(this.selectedCourseArr.length<3){
             this.selectedCourseArr.push(course);
          }
        }else{
          this.selectedCourseArr.splice(index,1);
        }
      },
      clock(){
        let _this=this;
        if(!(/^1(3|4|5|7|8)\d{9}$/.test(_this.mobile))){ 
          alert("请输入有效的手机号码"); 
          return false; 
        } 
        _this.getCodeHint="验证码获取中";
        _this.$http.get("/api/comnControl.do?mobileNo="+_this.mobile+"&getMessageAuthenticationCode=null")
        .then(
          (response)=>{
              let t=60;
              let timer=setInterval(function(){
                t--;
                if(t>0){
                   _this.getCodeHint=t+'s';
                }else{
                   clearTimeout(timer);
                   _this.getCodeHint="重新获取";
                }
              },1000)
          },
          (error)=>{
            console.log(error);
          }
        );
      },
      commit(){
        let _this=this;
        if(!_this.studentName){
            alert("请输入姓名");
            return false;
        }
        var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if(!re.test(_this.email)){
            alert("请填写有效的邮箱");
            return false;
        }
        if(!_this.mobile){
            alert("请填写手机号码");
            return false;
        }
        if(!_this.authCode){
            alert("请输入验证码");
            return false;
        }
        if(!_this.grade){
            alert("请选择年级");
            return false;
        }
        if(_this.selectedCourseArr.length==0){
            alert("请选择科目");
            return false;
        }
        if(!_this.remark){
            alert("请填写学生个人情况");
            return false;
        }
        _this.$http.post('/api/studentController.do?saveStudentBaseInfo&mobile='+_this.mobile+'&authCode='+_this.authCode,
                        {
                            id: _this.id,
                            studentName: _this.studentName,
                            couponCode:_this.couponCode,
                            email: _this.email,
                            mobile:_this.mobile,
                            authCode:_this.authCode,
                            grade:_this.grade,
                            studySubject:_this.selectedCourseArr.join('|'),
                            remark:_this.remark
                        })
            .then(
              (response)=>{
                 if(response.body.rtnCode=="ok"){
                   alert("预约成功，工作人员稍后会与您联系");
                   _this.$router.push({path: '/center'});
                 }else{
                   alert(response.body.rtnDesc);
                 }
                 
              },
              (error)=>{
                console.log(error);
              }
            );
      }
    },
    watch:{
      'grade':function(){
          this.selectedCourseArr=[];
          if(['一年级','二年级','三年级','四年级','五年级','六年级'].indexOf(this.grade)>-1){
             this.courseList=this.courseList1;
          }else if(['七年级','八年级','九年级'].indexOf(this.grade)>-1){
             this.courseList=this.courseList2;
          }else if(['高一','高二','高三'].indexOf(this.grade)>-1){
             this.courseList=this.courseList3;
          }
      },
      'remark':function(){
         if(this.remark>120){
           this.remark=this.remark.substring(0,120);
         }
      }
    },
    computed:{
        selectedCourse:function(){
          return this.selectedCourseArr.join(',');
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.register
{
   padding-bottom:1.3rem;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
   .header
   {
      padding:0.4rem 0;
      text-align:center;
      background:#fff;
      margin-bottom:0.3rem;
      .logo
      {
         display:inline-block;
         width:1.5rem;
         height:1.5rem;
         border:1px solid #ddd;
         border-radius:50%;
         overflow:hidden;
         img
         {
            width:100%;
            height:100%;
            border-radius:50%;
         }
      }
      p
      {
         margin-top:0.2rem;
         color:#999;
      }
   }
   .info1
   {
      background:#fff;
      padding-left:0.3rem;
      li
      {
        position:relative;
        padding:0 2rem 0 1.5rem;
        height:0.88rem;
        line-height:0.88rem;
        &:first-child,
        &:nth-child(2),
        &:nth-child(3),
        &:nth-child(4)
        {
          border-bottom:1px solid #eee;
          padding:0 0 0 1.5rem;
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
        .getCode
        {
          line-height:0.55rem;
          height:0.59rem;
          border:1px solid #078def;
          border-radius:0.1rem;
          color:#078def;
          width:1.8rem;
          text-align:center;
          position:absolute;
          right:0.3rem;
          top:0.15rem;
          background:#fff;
          font-size:0.24rem;
        }
      }
   }
   .info2
   {
      background:#fff;
      padding-left:0.3rem;
      margin-top:0.3rem;
      li
      {
        position:relative;
        padding:0 0 0 1.5rem;
        height:0.88rem;
        line-height:0.88rem;
        position:relative;
        &::after 
        {
           content:'';
           display:inline-block;
           width:0.15rem;
           height:0.15rem;
           border-right:1px solid #999;
           border-top:1px solid #999;
           position:absolute;
           right:0.3rem;
           top:0.36rem;
           -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
               -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                   transform: rotate(45deg);
        }
        &:first-child
        {
          border-bottom:1px solid #eee;
        }
        label
        {
          line-height:0.88rem;
          height:0.88rem;
          position:absolute;
          left:0;
          top:0;
          font-size:0.28rem;
        }
        input
        {
          width:100%;
          border:none;
        }
      }
   }
   .grade_prop
   {
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.6);
      position:fixed;
      left:0;
      top:0;
      ul
      {
         width:5rem;
         height:8rem;
         background:#fff;
         position:absolute;
         left:50%;
         top:50%;
         margin-left:-2.5rem;
         margin-top:-4rem;
         overflow-y:auto;
         li
         {
            height:0.8rem;
            line-height:0.8rem;
            position:relative;
            padding:0 0.4rem;
            &::before
            {
              content:'';
              display:inline-block;
              width:0.3rem;
              height:0.3rem;
              border:1px solid #ccc;
              border-radius:50%;
              margin-right:0.1rem;
              vertical-align:middle;
            }
            &.active
            {
              &::before
              {
                content:'√';
                display:inline-block;
                width:0.3rem;
                height:0.3rem;
                line-height:0.3rem;
                text-align:center;
                border:1px solid #078def;
                border-radius:50%;
                margin-right:0.1rem;
                vertical-align:middle;
                background:#078def;
                color:#fff;
              }
            }
            input
            {
               position:absolute;
               width:100%;
               height:100%;
               left:0;
               top:0;
               opacity:0;
            }
         }
      }
   }
   .course_prop
   {
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.6);
      position:fixed;
      left:0;
      top:0;
      z-index: 101;
      div
      {
        background:#fff;
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        p
        {
          line-height:0.6rem;
          height:0.6rem;
          text-indent:0.3rem;
          color:#666;
          background:#f5f5f5;
        }
        ul
        {
          padding:0 0.3rem;
          li
          {
            line-height:0.8rem;
            height:0.8rem;
            border-bottom:1px solid #ccc;
            &:last-child
            {
              border-bottom:none;
            }
            &.active
            {
              position:relative;
              &::after
              {
                content:'√';
                display:inline-block;
                width:0.34rem;
                height:0.34rem;
                line-height:0.34rem;
                text-align:center;
                color:#fff;
                background:#078def;
                position:absolute;
                right:0;
                top:0.25rem;
                border-radius:50%;
              }
            }
          }
        }
        button
        {
          width:100%;
          line-height:0.8rem;
          height:0.8rem;
          border:none;
          text-align:center;
          background:#078def;
          color:#fff;
        }
      }
   }
   .message
   {
     margin-top:0.3rem;
     background:#fff;
     border-top:1px solid #eee;
     border-bottom:1px solid #eee;
     textarea
     {
       height:2rem;
       width:100%;
       border:none;
       padding:0.2rem 0.3rem;
       line-height:1.2;
       resize : none;
       -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
               box-sizing: border-box;
     }
     p
     {
       padding-bottom:0.1rem;
       padding-right:0.3rem;
       text-align:right;
       color:#999;
     }
   }
   .commit
   {
      margin:0.2rem 0.24rem;
      line-height:0.8rem;
      height:0.8rem;
      border-radius:0.1rem;
      border:1px solid #ccc;
      text-align:center;
      background:#078def;
      color:#fff;
      font-size:0.32rem;
   }
}
</style>
